<template>
    <!-- 将获取到的歌单详情传到itemMusicTop组件当中 -->
    <ItemMusicTop :playList="state.playList"/>
    <!-- 将获取到的歌单歌曲传递到itemMusicList当中 
    效果当中收藏需要将歌单详情里面的收藏数量传入进去-->
    <ItemMusicList :itemList = "state.itemList" :trackCount="state.playList.trackCount" />
</template>


<script >
import { reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'

import { getMusicItem, getMusicList } from '@/api/item.js'
import ItemMusicTop from '@/components/item/ItemMusicTop.vue'
import ItemMusicList from '@/components/item/ItemMusicList.vue'

export default {
    setup() {
        const state = reactive({
            playList: {}, // 存储歌单详情
            itemList:[] //存储歌单歌曲
        });

        onMounted(async () => {
            // 获取当前路由页面的id
            const id = useRoute().query.id

            // 获取歌单详情页面的数据
            const res = await getMusicItem(id)
            console.log(res)

            // 切记，自己声明的playList与res中的playlist一定要区分开，不然会说undefined
            state.playList = res.data.playlist
            // console.log(state.playList)

            
            // 获取歌单歌曲列表
            const result = await getMusicList(id)
            console.log(result)
            // 将获得的结果赋值给声明的响应式变量,注意是歌曲
            state.itemList = result.data.songs

            // 防止页面刷新的时候数据丢失，可以将数据暂存在sessionStorage当中,新知识
            sessionStorage.setItem("itemMusic",JSON.stringify(state))
        });

        return{state}
        
    },
    components: {
        ItemMusicTop,
        ItemMusicList
    }
 
}

</script>